<!--
 * @Description: 地图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:25:47
-->
<!-- <template>
  <div>地图</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
</style> -->
<!-- html代码  -->
<template>
  <div>
      <!-- 1.提供地图容器 -->
      <div ref="map" style="height: 100%;"></div>
  </div>
</template>
<script>
import { get } from '@/utils/request'
import { mapMutations, mapState } from 'vuex';
export default {
  data() {
      return {
          // 存放设备信息数组 
          empData: []
      }
  },
  computed: {
      ...mapState(['ed'])
  },
  methods: {
      ...mapMutations(['SET_ED']),
      // 封装加载地图方法
      loadMap() {
          AMapLoader.load({
              key: "a9bfe3244c5b76090c50c714c2593af1", //申请好的Web端开发者 Key，调用 load 时必填
              version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
          })
              .then((AMap) => {
                  var map = new AMap.Map(this.$refs.map, {
                      pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                      viewMode: '3D', //地图模式
                      rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                      pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                      zoom: 3, //初始化地图层级
                      rotation: -15, //初始地图顺时针旋转的角度
                      center: [103.828434, 36.064822], //初始地图中心经纬度
                      // 设置地图样式 
                      // mapStyle: "amap://styles/whitesmoke",
                  });
                  this.empData.forEach(item => {
                      // 添加标记点  设备点 经纬度 
                      const marker = new AMap.Marker({
                          position: item.position,
                          // offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                          title: item.name,
                          // 用户携带数据 
                          extData: item,
                          // 自定义图标
                          // icon:"图标地址"
                      });
                      var that = this;
                      // 给标记点绑定事件 
                      marker.on('click', function () {
                          // this--->指向点击标记点 指向的不是vue实例 
                          console.log(this.getExtData(), '获取用户携带数据');
                          that.SET_ED({
                              device_id: this.getExtData().id,
                              engineer_id: this.getExtData().engineer_id
                          })
                      })
                      // 将标记点添加到高德地图 
                      map.add(marker);
                  })


                  // 行政区规划
                  AMap.plugin("AMap.DistrictSearch", function () {
                      let polygons = [];
                      var opts = {
                          subdistrict: 0, //获取边界不需要返回下级行政区
                          extensions: "all", //返回行政区边界坐标组等具体信息
                          level: "district", //查询行政级别为 市
                      };
                      let district = new AMap.DistrictSearch(opts);
                      district.setExtensions("all");
                      district.search("兰州市", function (status, result) {
                          map.remove(polygons); //清除上次结果
                          polygons = [];
                          var bounds = result.districtList[0].boundaries;
                          if (bounds) {
                              for (var i = 0, l = bounds.length; i < l; i++) {
                                  //生成行政区划polygon
                                  var polygon = new AMap.Polygon({
                                      strokeWeight: 5,
                                      path: bounds[i],
                                      fillOpacity: 0.4,
                                      fillColor: "#80d8ff",
                                      strokeColor: "#0091ea",
                                  });
                                  polygons.push(polygon);
                              }
                          }
                          map.add(polygons);
                          map.setFitView(polygons); //视口自适应
                      });
                  });
              })
              .catch((e) => {
                  // console.error(e); //加载错误提示
                  return Promise.reject(e)
              });
      },
      // 请求工程设备数据 
      async loadEmpData() {
          let res = await get('/dashboard/findEngineerDeviceTree');
          // {data:[{children:[{}]},{},{},{}]}
          // children里面对象存放的是设备信息 获取五个设备 将其动态加载到地图中
          let temp = [];//存放所有设备对象的数组 
          res.data.forEach((item, index, arr) => {
              if (item.children.length > 0) {
                  item.children.forEach(it => {
                      temp.push(it)
                  })
              }
          });
          console.log(temp, '22222');
          this.empData = temp;
      },
  },
  async mounted() {
      await this.loadEmpData();
      this.loadMap();
  }
}
</script>
<!-- css代码 -->
<style lang="less" scoped></style>